<!DOCTYPE html>

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>tester</title>
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
	<script type="text/javascript" src="../../output/zumo.js"></script>
	<script type="text/javascript">


		// ZUMO SETUP

		$(function() {

			Zumo.log.level = 3;

			Zumo.init(window.document, "conf-jquery.xml");

			Zumo.onConfLoaded = function() {
				$("body").trigger("startup");
			};

		});


        // VIEWS

        var views = {};

        views.Green = function() {};

        views.Green.prototype = {

            build: function() {
                return $('<div id="white" style="background-color: #09ff00;"></div>')[0];
            },

            init: function() {
                Zumo.log.info("*** views.Green.init");
            },

            destroy: function() {
                Zumo.log.info("*** views.Green.destroy");
            }

        };

        views.LogMediator = function(dom) {
            this.dom = dom;
        };

        views.LogMediator.prototype = {

            init: function() {
                Zumo.log.info("*** views.LogMediator.init");
            },

            destroy: function() {
                Zumo.log.info("*** views.LogMediator.destroy");
            }

        };

        views.EmptyMaster = Zumo.createViewMaster("empty", {

            display: function () {
                Zumo.log.warn("*** views.EmptyMaster.display");
                this.init();
            },

            destroy: function () {
                Zumo.log.warn("*** views.EmptyMaster.destroy");
            },

            clear: function () {
                Zumo.log.warn("*** views.EmptyMaster.clear");
                this.destroy();
            },

            init: function () {
                Zumo.log.warn("*** views.EmptyMaster.init");
            }

        });


        // COMMANDS

        var commands = {};

        commands.trigger = function(data) {
            $("body").trigger(data.type, data.data);
        };

        Zumo.createCommandMaster("_date", function() {
            alert(new Date());
        });


	</script>

	<style type="text/css">

		body {
			font-family: Candara, sans-serif;
			font-size: 10pt;
            margin: 0;
            padding: 0;
		}

		a {
            cursor: pointer;
			color: #666666;
			text-decoration: none;
		}

		a:hover {
			color: #999999;
		}

		hr {
			visibility: hidden;
		}

		#menu {
			float: left;
			width: 180px;
            padding: 10px;
		}

		#pages,
		#templates {
			float: left;
		}

		#pages div,
		#templates div {
			display: none;
            position: relative;
			width: 300px;
			height: 300px;
			padding: 25px;
		}

		#white {
			display: block !important;
            position: absolute !important;
            top: 0;
		}

		#brown,
        #pink {
			position: absolute;
			top: 0;
			left: 200px;
			width: 350px;
			height: 10px;
			background-color: #996600;
			visibility: hidden;
		}

        #pink {
			top: 10px;
			background-color: #f45cdf;
		}

	</style>
</head>

<body>

<div id="menu">
	<a id="linkGrey" title="Mediator: views.LogMediator; Can come from clicking on Orange."><strong>GREY</strong> (dom)</a><br />
	<a id="linkPurple" title="Depends: brown; Link only active when at Grey."><strong>PURPLE</strong> (dom)</a><br />
	<a id="linkOrange"><strong>ORANGE</strong> (domclone)</a><br />
	<a id="linkWhite" title="Mediator: views.LogMediator."><strong>WHITE</strong> (loader)</a><br />
	<a id="linkGreen" title="Mediator: views.LogMediator."><strong>GREEN</strong> (builder)</a><br />
	<a id="linkTransparent" title="Depends: brown, pink."><strong>TRANSPARENT</strong> (void)</a>
	<hr />
	<a id="linkBrown"><strong>BROWN</strong> (dom, block)</a> - <a id="clearBrown" href="javascript: void(0);">clear</a><br />
	<a id="linkPink"><strong>PINK</strong> (dom, block)</a> - <a id="clearPink" href="javascript: void(0);">clear</a>
    <hr />
    <a id="linkAlert"><strong>ALERT</strong> (function, command)</a><br />
    <a id="linkTrigger"><strong>TRIGGER</strong> (function, command)</a>
    <a id="linkDate"><strong>DATE</strong> (date, command)</a>
</div>

<div id="pages">
	<div id="grey" style="background-color: #cccccc;"></div>
	<div id="purple" style="background-color: #da00ff;">
		<p id="content"></p>
	</div>
	<div id="white"></div>
</div>

<div id="brown"></div>
<div id="pink"></div>

<div id="templates">
    <div class="orange" style="background-color: #c69642;"></div>
</div>

</body>
</html>
